Vuetify — Expansion Panel Styles

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Accordion

We can create an expansion panel with accordion style.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-expansion-panels accordion>
          <v-expansion-panel v-for="(item,i) in 5" :key="i">
            <v-expansion-panel-header>Item</v-expansion-panel-header>
            <v-expansion-panel-content>Lorem ipsum.</v-expansion-panel-content>
          </v-expansion-panel>
        </v-expansion-panels>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We have the accordion prop to make it display like an accordion.

Focusable

The focusable prop lets us make expansion panel headers focusable.

For instance, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-expansion-panels focusable>
          <v-expansion-panel v-for="(item,i) in 5" :key="i">
            <v-expansion-panel-header>Item</v-expansion-panel-header>
            <v-expansion-panel-content>Lorem ipsum.</v-expansion-panel-content>
          </v-expansion-panel>
        </v-expansion-panels>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

With the focusable prop, the selected expansion panel will have the heading highlighted.

External Control

The v-model prop lets us control which panels are open.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <div>
          <div class="text-center d-flex pb-4">
            <v-btn [@click](http://twitter.com/click "Twitter profile for @click")="all">all</v-btn>
            <div>{{ panel }}</div>
            <v-btn [@click](http://twitter.com/click "Twitter profile for @click")="none">none</v-btn>
          </div>

<v-expansion-panels v-model="panel" multiple>
            <v-expansion-panel v-for="(item,i) in items" :key="i">
              <v-expansion-panel-header>Header {{ item }}</v-expansion-panel-header>
              <v-expansion-panel-content>Lorem ipsum.</v-expansion-panel-content>
            </v-expansion-panel>
          </v-expansion-panels>
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    panel: [],
    items: 5,
  }),
  methods: {
    all() {
      this.panel = [...Array(this.items).keys()].map((k, i) => i);
    },
    none() {
      this.panel = [];
    },
  },
};
</script>

to create 5 expansion panels.

We have the all method to open all panels.

This works because we have the multiple prop.

The none method closes all the panels by setting this.panel to an empty array.

The v-model on v-expansion-panels controls the open state of the expansion panels.

Custom Icons

We can add custom icons for the top-right icon.

To do that, we write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <div>
          <v-expansion-panels>
            <v-expansion-panel>
              <v-expansion-panel-header>
                Item
                <template v-slot:actions>
                  <v-icon color="primary">$expand</v-icon>
                </template>
              </v-expansion-panel-header>
              <v-expansion-panel-content>Lorem ipsum.</v-expansion-panel-content>
            </v-expansion-panel>

            <v-expansion-panel>
              <v-expansion-panel-header disable-icon-rotate>
                Item
                <template v-slot:actions>
                  <v-icon color="teal">mdi-check</v-icon>
                </template>
              </v-expansion-panel-header>
              <v-expansion-panel-content>Lorem ipsum.</v-expansion-panel-content>
            </v-expansion-panel>

            <v-expansion-panel>
              <v-expansion-panel-header disable-icon-rotate>
                Item
                <template v-slot:actions>
                  <v-icon color="error">mdi-alert-circle</v-icon>
                </template>
              </v-expansion-panel-header>
              <v-expansion-panel-content>Lorem ipsum.</v-expansion-panel-content>
            </v-expansion-panel>
          </v-expansion-panels>
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We populate the icon within the actions slot.

Conclusion

We can make expansion panels show in an accordion style.

Also, we can add custom icons to expansion panels.